<form #f="ngForm" class="container">
        <div class="row form-group">
            <div class="col-sm text-dark" i18n>
                {{ 'projectType' | translate }}
            </div>

            <div class="col-sm" i18n>
                <span class="text-danger">{{ 'projectTypeTip' | translate }} </span>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm">
                <input class="form-check-input" type="radio" [(ngModel)]='parameters.ProjectType' name="frame" value="AspNet" />
                <label for="ASP .NET">ASP .NET</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" type="radio" [(ngModel)]='parameters.ProjectType' name="frame" value="AspNetCore" />
                <label for="AspNetCore">ASP .NET Core</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" type="radio" [(ngModel)]='parameters.ProjectType' name="frame" value="Owin" />
                <label for="Owin">Owin</label>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm text-dark" i18n>
                {{ 'projectName' | translate }}
            </div>
            <div class="col-sm" i18n>
                <span class="text-danger"> {{ 'projectNameTip' | translate }} </span>
            </div>
        </div>

        <div  class="row form-group">
            <div class="col-sm">
                <input class="form-control" [(ngModel)]='parameters.ProjectName' type="text" [ngModelOptions]="{standalone: true}"/>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm text-dark">
                {{ 'projectDescription' | translate }}
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm inputItem">
                <input class="form-control" [(ngModel)]='parameters.ProjectDescription'  type="text" [ngModelOptions]="{standalone: true}" />
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm text-dark">
                {{ 'orm' | translate }}
            </div>
            <div class="col-sm">
                <span class="text-danger"> {{ 'ormTip' | translate }} </span>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm">
                <input class="form-check-input" Id="NHibernateOrm" type="radio" [(ngModel)]='parameters.ORM' name="ORM" value="NHibernate" (ngModelChange)="changeOrm('NHibernate')"
                />
                <label for="NHibernateOrm">NHibernate</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" Id="EFCoreOrm" type="radio" [(ngModel)]='parameters.ORM' name="ORM" value="EFCore" (ngModelChange)="changeOrm('EFCore')"
                />
                <label for="EFCoreOrm">EntityFramework Core</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" Id="DapperOrm" type="radio" [(ngModel)]='parameters.ORM' name="ORM" value="Dapper" (ngModelChange)="changeOrm('Dapper')"
                />
                <label for="DapperOrm">Dapper</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" Id="MongoDBOrm" type="radio" [(ngModel)]='parameters.ORM' name="ORM" value="MongoDB" (ngModelChange)="changeOrm('MongoDB')"
                />
                <label for="MongoDBOrm">MongoDB</label>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm text-dark" i18n>
                {{ 'dataBase' | translate }}
            </div>

            <div class="col-sm" i18n>
                <span class="text-danger">{{ 'dataBaseTip' | translate }} </span>
            </div>
        </div>
        
        <div class="row form-group">
            <div class="col-sm">
                <input class="form-check-input" type="radio" [(ngModel)]='parameters.Database' [attr.disabled]="!enableDatabase.MSSQL?'':null"
                    name="Database" value="MSSQL"  Id="MSSQL"  (ngModelChange)="changeDataBase('MSSQL')"/>
                <label for="MSSQL">MSSQL</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" type="radio" [(ngModel)]='parameters.Database' [attr.disabled]="!enableDatabase.MySQL?'':null"
                    name="Database" value="MySQL"  Id="MySQL"  (ngModelChange)="changeDataBase('MySQL')"/>
                <label for="MySQL">MySQL</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" type="radio" [(ngModel)]='parameters.Database' [attr.disabled]="!enableDatabase.SQLite?'':null"
                    name="Database" value="SQLite" Id="SQLite"  (ngModelChange)="changeDataBase('SQLite')"/>
                <label for="SQLite">SQLite</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" type="radio" [(ngModel)]='parameters.Database' [attr.disabled]="!enableDatabase.PostgreSQL?'':null"
                    name="Database" value="PostgreSQL"  Id="PostgreSQL" (ngModelChange)="changeDataBase('PostgreSQL')"/>
                <label for="PostgreSQL">PostgreSQL</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" type="radio" [(ngModel)]='parameters.Database' [attr.disabled]="!enableDatabase.InMemory?'':null"
                    name="Database" value="InMemory"  Id="InMemory" (ngModelChange)="changeDataBase('InMemory')"/>
                <label for="InMemory">InMemory</label>
            </div>
            <div class="col-sm">
                <input class="form-check-input" type="radio" [(ngModel)]='parameters.Database' [attr.disabled]="!enableDatabase.MongoDB?'':null"
                    name="Database" value="MongoDB" Id="MongoDB" (ngModelChange)="changeDataBase('MongoDB')" />
                <label for="MongoDB">MongoDB</label>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm text-dark">
                {{ 'connectionString' | translate }}
            </div>
            <div class="col-sm">
                <span class="text-danger"> {{ 'connectionStringTip' | translate }}</span>
            </div>
        </div>

        <div class="row form-group input-group mb-3">
            <input type="text" class="form-control" [(ngModel)]='parameters.ConnectionString' [ngModelOptions]="{standalone: true}" aria-describedby="basic-addon4">
            <div class="input-group-append">
                <span class="input-group-text" id="basic-addon4" (click)="testConnection()">{{'testConnection' | translate}}</span>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm text-dark">
                {{ 'useDefaultPlugin' | translate }}
            </div>
            <div class="col-sm">
                <span class="text-danger"> {{ 'useDefaultPluginTip' | translate }}</span>
            </div>
        </div>

        <div class="row form-group input-group mb-3">
            <input type="text" class="form-control" [(ngModel)]='parameters.UseDefaultPlugins' [ngModelOptions]="{standalone: true}"
                aria-describedby="basic-addon3">
            <div class="input-group-append">
                <span class="input-group-text" id="basic-addon3" (click)="pluginSelect()">{{'browser' | translate}}</span>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm text-dark">
                {{ 'outPutFolder' | translate }}
            </div>
            <div class="col-sm">
                <span class="text-danger"> {{ 'outPutFolderTip' | translate }}</span>
            </div>
        </div>

        <div class="row form-group input-group mb-3">
            <input type="text" class="form-control" [(ngModel)]='parameters.OutputDirectory' [ngModelOptions]="{standalone: true}" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <span class="input-group-text" id="basic-addon2" (click)="outPutSelect()">{{'browser' | translate}}</span>
            </div>
        </div>

        <div class="row form-group center-block">
            <input class="btn-success btn-lg btnCenter" type="button" value="{{'create' | translate}}" (click)="createProject()" />
        </div>


</form>